<!-- 分配记录 - 客户 -->
<template>
  <dt-modal-edit ref='edit' :title='title' okText='确认' :width='800' @ok='onOk'
    @cancelData='hide'>
    <div style="marginBottom:20px">
      <Select v-model="adviserVal" placeholder="选择分配顾问" label-in-value
        @on-change="adviserChange" style="width: 220px;margin-right:14px;">
        <Option v-for="(item, index) in adviserList" :key="index" :value="item.userId"
          :label="item.userName">
        </Option>
      </Select>
    </div>
    <Tabs ref="nav" @on-click="tabsClick" type="card" v-model="reassignCurrent"
      :animated="false" name='reassign'>
      <TabPane class="tab_pane" :label="distribuLabel" name="distributable">
        <dt-grid ref="distributable" :columns="distributableColumns" page
          :onFetch='distributable' :height='400' :select='select' :showPageTotal='false' />
      </TabPane>
      <TabPane class="tab_pane" :label="undistribuLabel" name="undistributable">
        <dt-grid ref="undistributable" :columns="undistributableColumns" page
          :onFetch='undistributable' :height='400' :showPageTotal='false' />
      </TabPane>
    </Tabs>
  </dt-modal-edit>
</template>

<script>
  import undistributableColumns from '../opt/undistributableColumns.js'
  import distributableColumns from '../opt/distributableColumns.js'
  import customerMgr from '@/biz/customer/customer'
  export default {
    components: {},
    data() {
      return {
        undistribuNum: "0",
        distribuNum: "0",
        adviserVal: '',
        adviserValName: '',
        adviserList: [],
        currentUserId: '',
        undistributableColumns: [],
        distributableColumns: [],
        title: '重新分配',
        distributableIds: [],
        undistributableIds: [],
        select: {
          checkbox: {
            checkMethod: ({ row }) => {
              return this.reassignCurrent == 'distributable'
            }
          },
          change: (e) => {
            this.tableChange(e)
          },
        },
        currentChoose: [],
        reassignCurrent: 'distributable',
        oldreassignCurrent: 'distributable',
        distribuLabel: (h) => {
          return h('div', [
            h('span', `可分配 (${this.distribuNum})`),
          ])
        },
        undistribuLabel: (h) => {
          return h('div', [
            h('span', `不可分配 (${this.undistribuNum})`),
            h(
              'Poptip', {
                props: {
                  placement: 'top-start',
                  transfer: true,
                  trigger: 'hover',
                },
              },
              [
                h(
                  'Icon', {
                    class: 'iconClass',
                    props: {
                      type: 'ios-alert-outline',
                      color: '#ff9900',
                      size: '18',
                    },
                    style: {
                      width: '18px',
                      height: '18px',
                      verticalAlign: 'middle',
                      marginRight: '0px',
                      marginLeft: '8px',
                    }
                  }
                ),
                h(
                  'div', {
                    slot: 'content',
                  },
                  '客户已被分配，不允许重复操作！'
                ),
              ]
            ),
          ])
        }
      }
    },
    methods: {
      tabsClick(val) {
        console.log(val)
        if (val == this.oldState) return false
        this.oldState = val
      },
      show(val, currentUserId) {
        this.adviserVal = '';
        this.currentUserId = currentUserId;
        this.distributableIds = val.allow;
        this.undistributableIds = val.notAllow;
        this.distribuNum = val.allow.length;
        this.undistribuNum = val.notAllow.length;
        this.$refs.distributable.fetch(true);
        this.$refs.undistributable.fetch(true);
        this.$refs.edit.show();
        this.getAdviserList();
      },
      hide() {
        this.$refs.distributable.clearFilter()
        this.$refs.undistributable.clearFilter()
      },
      getAdviserList() {
        let params = {
          buildingId: Number(this.$dt.buildInfo().housesId),
          onlineType: 1,
          haveRole: 1
        }
        customerMgr.adviserList(params).then((res) => {
          this.adviserList = res
          let _index = this.adviserList.findIndex((item) => {
            return item.userId == this.currentUserId
          })
          if (_index != -1) {
            this.adviserList.splice(_index, 1)
          }
        })
      },
      //顾问更改
      adviserChange(val) {
        if (val) {
          console.log(val, '顾问');
          this.adviserVal = val.value
          this.adviserValName = val.label
        }
      },
      //表格选中
      tableChange(val) {
        console.log(val, '表格选中的');
        this.currentChoose = []
        if (val && val.length) {
          val.forEach((item) => {
            if (item.customerId) {
              this.currentChoose.push(Number(item.customerId))
            }
          })
        }
      },
      // 分配确定
      onOk() {
        if (!this.adviserVal) {
          this.$Message.warning('请选择分配顾问')
          return false
        }
        if (!this.currentChoose.length) {
          this.$Message.warning('请选择需要分配的客户')
          return false
        }
        let numLen = this.currentChoose.length
        this.$Modal.confirm({
          title: '分配客户确认',
          content: `<p>是否将${numLen}个客户分配给${this.adviserValName}？</p>`,
          onOk: () => {
            let params = {
              userId: this.$dt.userInfo().userId,
              buildingId: this.$dt.buildInfo().housesId,
              newUserId: this.adviserVal,
              oldUserId: this.currentUserId,
              customerIds: this.currentChoose,
              operationType: 0, //操作类型：0部分，1全部
              adminRole: '1',
              onRecord: 1,
            }
            customerMgr.customerAssignment(params).then((res) => {
              this.$Message.success('分配成功。')
              this.$emit('regionSuccess')
              this.hide()
              this.$refs.edit.hide()
            })
          }
        })
      },

      distributable(data) {
        if (this.distributableIds.length == 0) {
          return Promise.resolve({
            list: [],
            total: 0
          })
        } else {
          let params = {
            ...data,
            buildingId: this.$dt.buildInfo().housesId,
            userCustomerId: this.distributableIds, //归属id
          }
          return customerMgr.getCustomerListNew(params).then((res) => {
            if (res && res.records && res.records.length) {
              res.list = res.records
              return res
            }
          })
        }

      },
      undistributable(data) {
        if (this.undistributableIds.length == 0) {
          return Promise.resolve({
            list: [],
            total: 0
          })
        } else {
          let params = {
            ...data,
            buildingId: this.$dt.buildInfo().housesId,
            userCustomerId: this.undistributableIds, //归属id
            _distributable: '__undistributable',
          }
          return customerMgr.getCustomerListNew(params).then((res) => {
            if (res && res.records && res.records.length) {
              res.list = res.records
              return res
            }
          })
        }
      },
    },
    mounted() {
      this.undistributableColumns = undistributableColumns.options(this, true)
      this.distributableColumns = distributableColumns.options(this, true)
    },
  }
</script>
<style lang='scss' scoped>
  ::v-deep.iconClass {
    cursor: pointer;
    font-weight: 600;
    width: 18px;
    height: 18px;
    margin-right: 0px;
    margin-left: 8px;
  }
</style>